<template>
<div>
    <header class="main-header">
        <a class="logo">
            <span class="logo-mini"><img src="http://cdn.motitravel.com/pc/images/logo2.png" /></span>
            <span class="logo-lg"><img src="http://cdn.motitravel.com/h5/webresource/images/logo-text.png" /></span>
        </a>
        <nav class="navbar navbar-static-top" role="navigation">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="navbar-custom-menu" id="userInfo">
                <ul class="nav navbar-nav">
                    <li class="dropdown user user-menu">
                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="images/avatar.jpg" class="user-image" alt="User Image">
                            <span class="hidden-xs">{{name}}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="user-header">
                                <img src="images/avatar.jpg" class="img-circle" alt="User Image">
                                <p>{{name}}</p>
                            </li>
                            <li class="user-footer">
                                <div class="pull-right">
                                    <a href="javascript:void(0)" class="btn btn-default btn-flat" @click="logout">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu">
                <!--<li v-link="{ path: '/regionsList', activeClass: 'active' }">
                    <a href="javascript:void(0)">
                        <i class="fa fa-dashboard"></i> <span>景区管理</span>
                    </a>
                </li>-->
                <router-link to="/regionsList" tag="li">
                    <a href="javascript:void(0)">
                        <i class="fa fa-dashboard"></i> <span>景区管理</span>
                    </a>
                </router-link>
                <router-link to="/Bar" tag="li">
                    <a href="javascript:void(0)">
                        <i class="fa fa-dashboard"></i> <span>景区路线管理</span>
                    </a>
                </router-link>
            </ul>
        </section>
    </aside>

    <div class="content-wrapper">
        <router-view></router-view>
    </div>
</div>
</template>

<script>
var Vue = require('vue');
var VueRouter = require('vue-router');
var RegionsList = require('./RegionsList.vue');
var RegionsDetail = require('./RegionsDetail.vue');
var RegionsEdit = require('./RegionsEdit.vue');

var routes = [
    { path: '/regionsList', component: RegionsList },
    { path: '/regionsDetail/:region_id', component: RegionsDetail },
    { path: '/regionsEdit/:region_id', component: RegionsEdit }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
var router = new VueRouter({
    routes: routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
var app = new Vue({
    el : '#motiApp',
    data : {
        name: localStorage.getItem("U_NAME")
    },
    methods : {
        //登出
        logout: function(){
            localStorage.removeItem("U_NAME");
            localStorage.removeItem("U_INFO");
            location.href = PAGE_API.LOGIN;
        }
    },
    router:router
});
</script>